<template>
  <view :style="{ height: pageHeight, overflow: 'hidden' }">
    <search @search="disableScroll" ref="mySearch" />

    <input type="text" ref="heheInput" />

    <!-- 焦点图 -->
    <swiper
      class="banner"
      indicator-dots
      indicator-color="rgba(255, 255, 255, 0.6)"
      indicator-active-color="#fff"
    >
      <swiper-item>
        <navigator url="/pages/goods/index">
          <image src="http://static.botue.com/ugo/uploads/banner1.png"></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator url="/pages/goods/index">
          <image src="http://static.botue.com/ugo/uploads/banner2.png"></image>
        </navigator>
      </swiper-item>
      <swiper-item>
        <navigator url="/pages/goods/index">
          <image src="http://static.botue.com/ugo/uploads/banner3.png"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <scroll-view
      scroll-y
      style="height: 200rpx;  border: 1rpx solid red; box-sizing: border-box; "
    >
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
      <view>hehe heheda hehe heheda hehe heheda</view>
    </scroll-view>

    <!-- 导航条 -->
    <view class="navs">
      <navigator open-type="switchTab" url="/pages/category/index">
        <image
          src="http://static.botue.com/ugo/uploads/icon_index_nav_4@2x.png"
        ></image>
      </navigator>
      <navigator url="/pages/list/index">
        <image
          src="http://static.botue.com/ugo/uploads/icon_index_nav_3@2x.png"
        ></image>
      </navigator>
      <navigator url="/pages/list/index">
        <image
          src="http://static.botue.com/ugo/uploads/icon_index_nav_2@2x.png"
        ></image>
      </navigator>
      <navigator url="/pages/list/index">
        <image
          src="http://static.botue.com/ugo/uploads/icon_index_nav_1@2x.png"
        ></image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floors">
      <view class="floor">
        <view class="title">
          <image
            src="http://static.botue.com/ugo/uploads/pic_floor01_title.png"
          ></image>
        </view>
        <view class="items">
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor01_1@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor01_2@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor01_3@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor01_4@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor01_5@2x.png"
            ></image>
          </navigator>
        </view>
      </view>
      <view class="floor">
        <view class="title">
          <image
            src="http://static.botue.com/ugo/uploads/pic_floor02_title.png"
          />
        </view>
        <view class="items">
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor02_1@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor02_2@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor02_3@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor02_4@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor02_5@2x.png"
            ></image>
          </navigator>
        </view>
      </view>
      <view class="floor">
        <view class="title">
          <image
            src="http://static.botue.com/ugo/uploads/pic_floor03_title.png"
          ></image>
        </view>
        <view class="items">
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor03_1@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor03_2@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor03_3@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor03_4@2x.png"
            ></image>
          </navigator>
          <navigator url="/pages/list/index">
            <image
              src="http://static.botue.com/ugo/uploads/pic_floor03_5@2x.png"
            ></image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 回到顶部 -->
    <view v-if="scrollTop > 100" class="goTop icon-top"></view>
  </view>
</template>

<script>
import search from "@/components/search";
import Vue from "vue";
import _ from "lodash";

export default {
  useHeHe: true,

  data() {
    return {
      scrollTop: 0,
      pageHeight: "auto",
    };
  },

  components: {
    search,
  },

  methods: {
    disableScroll(ev) {
      this.pageHeight = ev.pageHeight + "px";

      // console.log(this.selectComponent("#mySearch"));
      console.log(this.$refs.mySearch, "hehe");
      console.log(this.$refs.heheInput, "heheInput");
    },
  },

  async onLoad() {
    const res = await this.$request({
      url: "/api/public/v1/home/swiperdata",
      method: "get",
    });

    console.log(res);
  },

  onPullDownRefresh() {
    console.log("用户下拉了");
    uni.showNavigationBarLoading();
    setTimeout(() => {
      console.log("接口请求完了...");
      uni.stopPullDownRefresh();
      uni.hideNavigationBarLoading();
    }, 5000);
  },

  onPageScroll: _.debounce(function(e) {
    console.log(e);
    this.scrollTop = e.scrollTop;
  }, 100),

  // async onPageScroll(e) {
  //   console.log(e);
  //   await this.$debounce(100);
  //   console.log("给数据赋值了");
  //   this.scrollTop = e.scrollTop;
  // },
};
</script>

<style scoped lang="less">
.banner {
  width: 100%;
  height: 340rpx;

  image {
    width: 100%;
    height: 340rpx;
  }
}

.navs {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 44rpx;

  image {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor {
  .title {
    width: 750rpx;
    height: 60rpx;
    padding: 20rpx 0 0 8rpx;
    background-color: #f4f4f4;
  }

  .items {
    padding: 20rpx 16rpx;
    overflow: hidden;

    navigator {
      width: 193rpx;
      height: 188rpx;
      margin-left: 10rpx;
      margin-bottom: 10rpx;
      float: left;
    }

    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
      margin-left: 0rpx;
    }

    navigator:nth-child(2),
    navigator:nth-child(5) {
      width: 273rpx;
    }
  }

  &:first-child {
    .items {
      navigator {
        width: 233rpx;
      }
    }
  }
}

.goTop {
  position: fixed;
  bottom: 30rpx;
  /* #ifdef H5 */
  bottom: 65px;
  /* #endif */
  right: 30rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100rpx;
  height: 100rpx;
  font-size: 48rpx;
  color: #666;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>
